<template>
  <div ref="chart" style="width: 100%; height: 300px;"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';

// 图表配置
const option = {
    backgroundColor: '#00264D',
    grid: {
        left: "2%",
        right: "2%",
        bottom: "5%",
        top: 30,
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            data: ['01', '02', '03', '04', '05', '06', '07', '08', '09'],
            axisTick: true,
            axisLine: {
                show: false,
            },
            axisLabel: {
                show: true,
                color: "#6DB7FF",
                fontSize: 16
            },
        },
    ],
    yAxis: [
        {
            min: 0,
            interval: 500,
            type: 'value',
            axisLine: {
                show: false,
            },
            splitLine: {
                show: false,
                lineStyle: {
                    color: "#003969",
                    type: "solid"
                },
            },
            axisLabel: {
                show: true,
                color: "#6DB7FF",
                fontSize: 16
            },
        }
    ],
    series: [
        {
            type: 'bar',
            barWidth: 18,
            data: [300, 450, 90, 23, 412, 2412, 412, 421, 3123],
            z: 2,
            itemStyle: {
                opacity: 0.8,
                color: "#23FEE8",
                barBorderRadius: [8, 8, 0, 0],
            },
        },
    ],
};

// 设置图表
const chart = ref(null);
let myChart;

onMounted(() => {
    // 初始化图表
    myChart = echarts.init(chart.value);
    myChart.setOption(option);

    // 监听窗口大小变化
    window.addEventListener('resize', () => {
        myChart.resize();
    });
});

onBeforeUnmount(() => {
    // 清理事件和图表实例
    window.removeEventListener('resize', () => {
        myChart.resize();
    });
    if (myChart) {
        myChart.dispose();
    }
});
</script>

<style scoped>
/* 添加一些样式 */
</style>
